<template>
    <div id="pie_box">

    </div>
</template>

<script setup lang='ts'>
// const props = defineProps(['piedata'])
const props = defineProps<{
    piedata: Array<{ x: string, val: number }>
}>()
// console.log(props.piedata);

import * as echarts from 'echarts';
import { onMounted } from 'vue';
onMounted(() => {
    var pie_box = document.getElementById('pie_box');
    var myChart = echarts.init(pie_box);
    // 控制图标的缩放
    window.addEventListener('resize', function () {
        myChart.resize();
    });
    let option = {
        title: {
            text: '每周转介绍报名量',
            subtext: '2308班级',
            left: 'center'
        },
        tooltip: {
            trigger: 'item'
        },
        legend: {
            orient: 'vertical',
            left: 'left'
        },
        series: [
            {
                name: '转介绍',
                type: 'pie',
                radius: '50%',
                data: props.piedata.map(item => ({ name: item.x, value: item.val })),
            }
        ]
    };

    myChart.setOption(option);

})

</script>
<style scoped>
#pie_box {
    width: 50%;
    height: 500px;
}
</style>